<script type="text/x-template" id="cider-settings">
    <div class="content-inner settings-page">
        <div class="md-option-container">  
            <div class="md-option-header">
                <span>{{$root.getLz('settings.header.general')}}</span>
            </div>
            <div class="settings-option-body">
                <div class="md-option-line">
                    <div class="md-option-segment md-option-segment_auto">
                        <button class="md-btn" @click="app.appRoute('apple-account-settings')">
                            {{$root.getLz('term.accountSettings')}}
                        </button>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('term.privateSession')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.mk.privateEnabled" switch/>
                    </div>
                </div>
            </div>
            <div class="md-option-header">
                <span>{{$root.getLz('settings.header.audio')}}</span>
            </div>
            <div class="settings-option-body">
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.quality')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality"
                                v-on:change="changeAudioQuality">
                            <!-- //   <option value="990">Extreme</option> -->
                            <option value="256">{{$root.getLz('settings.header.audio.quality.high')}}</option>
                            <option value="64">{{$root.getLz('settings.header.audio.quality.low')}}</option>
                            <option value="auto">{{$root.getLz('settings.header.audio.quality.auto')}}</option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.seamlessTransition')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality')}}
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.advanced.AudioContext" v-on:change="toggleAudioContext"
                               switch/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                    <div class="md-option-segment">
                        {{$root.getLz('term.equalizer')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <button class="md-btn" onclick="app.modals.equalizer = true">
                            {{$root.getLz('term.equalizer')}}
                        </button>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}}
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.audio.normalization" v-on:change="toggleNormalization"
                               switch/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.audio.spatial" v-on:change="toggleSpatial" switch/>
                    </div>
                </div>
            </div>
            <div class="md-option-header">
                <span>{{$root.getLz('settings.header.visual')}}</span>
            </div>
            <div class="settings-option-body">
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" @change="$root.getNowPlayingArtworkBG(undefined, true)"
                                v-model="app.cfg.visual.window_background_style">
                            <option value="none">{{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
                            </option>
                            <option value="artwork">
                                {{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
                            </option>
                            <option value="image">
                                {{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.visual.animatedArtwork')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" v-model="app.cfg.visual.animated_artwork">
                            <option value="always">{{$root.getLz('settings.header.visual.animatedArtwork.always')}}
                            </option>
                            <option value="limited">{{$root.getLz('settings.header.visual.animatedArtwork.limited')}}
                            </option>
                            <option value="disabled">{{$root.getLz('settings.header.visual.animatedArtwork.disable')}}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line"
                     v-if="app.cfg.visual.animated_artwork == 'always' || app.cfg.visual.animated_artwork == 'limited'">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.visual.animatedArtworkQuality')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" v-model="app.cfg.visual.animated_artwork_qualityLevel">
                            <option value="0">{{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
                            </option>
                            <option value="1">{{$root.getLz('settings.header.visual.animatedArtworkQuality.medium')}}
                            </option>
                            <option value="2">{{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
                            </option>
                            <option value="3">
                                {{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
                            </option>
                            <option value="4">{{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.visual.animatedWindowBackground')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
                        <small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration">
                            <option value="default">
                                {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
                            </option>
                            <option value="webgpu">
                                {{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
                            </option>
                            <option value="disabled">{{$root.getLz('term.disabled')}}</option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.visual.showPersonalInfo')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.visual.showuserinfo" v-on:change="toggleUserInfo"
                               switch/>
                    </div>
                </div>
            </div>

            <div class="md-option-header">
                <span>{{$root.getLz('settings.header.lyrics')}}</span>
            </div>
            <div class="settings-option-body">
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch/>
                    </div>
                </div>
                <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" v-model="app.cfg.lyrics.mxm_language">
                            <option value='disabled'>Disabled</option>
                            <option value='ab'>Abkhazian</option>
                            <option value='aa'>Afar</option>
                            <option value='af'>Afrikaans</option>
                            <option value='ak'>Akan</option>
                            <option value='sq'>Albanian</option>
                            <option value='am'>Amharic</option>
                            <option value='ar'>Arabic</option>
                            <option value='an'>Aragonese</option>
                            <option value='hy'>Armenian</option>
                            <option value='as'>Assamese</option>
                            <option value='a5'>Assamese-romaji</option>
                            <option value='a3'>Asturian</option>
                            <option value='av'>Avaric</option>
                            <option value='ae'>Avestan</option>
                            <option value='ay'>Aymara</option>
                            <option value='az'>Azerbaijani</option>
                            <option value='bm'>Bambara</option>
                            <option value='ba'>Bashkir</option>
                            <option value='eu'>Basque</option>
                            <option value='b1'>Bavarian</option>
                            <option value='be'>Belarusian</option>
                            <option value='bn'>Bengali</option>
                            <option value='b5'>Bengali-romaji</option>
                            <option value='bh'>Bihari languages</option>
                            <option value='b3'>Bishnupriya</option>
                            <option value='bi'>Bislama</option>
                            <option value='bs'>Bosnian</option>
                            <option value='br'>Breton</option>
                            <option value='bg'>Bulgarian</option>
                            <option value='my'>Burmese</option>
                            <option value='ca'>Catalan</option>
                            <option value='c2'>Cebuano</option>
                            <option value='b2'>Central bikol</option>
                            <option value='c3'>Central kurdish</option>
                            <option value='ch'>Chamorro</option>
                            <option value='c1'>Chavacano</option>
                            <option value='ce'>Chechen</option>
                            <option value='ny'>Chichewa</option>
                            <option value='zh'>Chinese (simplified)</option>
                            <option value='z1'>Chinese (traditional)</option>
                            <option value='rz'>Chinese-romaji</option>
                            <option value='cu'>Church slavic</option>
                            <option value='cv'>Chuvash</option>
                            <option value='kw'>Cornish</option>
                            <option value='co'>Corsican</option>
                            <option value='cr'>Cree</option>
                            <option value='c4'>Creoles and pidgins</option>
                            <option value='c5'>Creoles and pidgins, english based</option>
                            <option value='c6'>Creoles and pidgins, french-based</option>
                            <option value='c7'>Creoles and pidgins, portuguese-based</option>
                            <option value='hr'>Croatian</option>
                            <option value='cs'>Czech</option>
                            <option value='da'>Danish</option>
                            <option value='d1'>Dimli (individual language)</option>
                            <option value='dv'>Divehi</option>
                            <option value='d3'>Dotyali</option>
                            <option value='nl'>Dutch</option>
                            <option value='dz'>Dzongkha</option>
                            <option value='m2'>Eastern mari</option>
                            <option value='a2'>Egyptian arabic</option>
                            <option value='e1'>Emilian-romagnol</option>
                            <option value='en'>English</option>
                            <option value='m6'>Erzya</option>
                            <option value='eo'>Esperanto</option>
                            <option value='et'>Estonian</option>
                            <option value='ee'>Ewe</option>
                            <option value='fo'>Faroese</option>
                            <option value='h1'>Fiji hindi</option>
                            <option value='fj'>Fijian</option>
                            <option value='f1'>Filipino</option>
                            <option value='fi'>Finnish</option>
                            <option value='fr'>French</option>
                            <option value='f2'>Frisian, northern</option>
                            <option value='fy'>Frisian, western</option>
                            <option value='ff'>Fulah</option>
                            <option value='gl'>Galician</option>
                            <option value='lg'>Ganda</option>
                            <option value='ka'>Georgian</option>
                            <option value='de'>German</option>
                            <option value='n2'>German, low</option>
                            <option value='g1'>Goan konkani</option>
                            <option value='el'>Greek</option>
                            <option value='e2'>Greek-romaji</option>
                            <option value='kl'>Greenlandic</option>
                            <option value='gn'>Guarani</option>
                            <option value='gu'>Gujarati</option>
                            <option value='g2'>Gujarati-romaji</option>
                            <option value='ht'>Haitian creole</option>
                            <option value='ha'>Hausa</option>
                            <option value='he'>Hebrew</option>
                            <option value='hz'>Herero</option>
                            <option value='hi'>Hindi</option>
                            <option value='h3'>Hindi-romaji</option>
                            <option value='ho'>Hiri motu</option>
                            <option value='hu'>Hungarian</option>
                            <option value='is'>Icelandic</option>
                            <option value='io'>Ido</option>
                            <option value='ig'>Igbo</option>
                            <option value='i1'>Iloko</option>
                            <option value='id'>Indonesian</option>
                            <option value='ia'>Interlingua</option>
                            <option value='ie'>Interlingue</option>
                            <option value='iu'>Inuktitut</option>
                            <option value='ik'>Inupiaq</option>
                            <option value='ga'>Irish</option>
                            <option value='it'>Italian</option>
                            <option value='ja'>Japanese</option>
                            <option value='rj'>Japanese-romaji</option>
                            <option value='jv'>Javanese</option>
                            <option value='x1'>Kalmyk</option>
                            <option value='kn'>Kannada</option>
                            <option value='k2'>Kannada-romaji</option>
                            <option value='kr'>Kanuri</option>
                            <option value='k1'>Karachay-balkar</option>
                            <option value='ks'>Kashmiri</option>
                            <option value='kk'>Kazakh</option>
                            <option value='km'>Khmer, central</option>
                            <option value='ki'>Kikuyu</option>
                            <option value='rw'>Kinyarwanda</option>
                            <option value='ky'>Kirghiz</option>
                            <option value='kv'>Komi</option>
                            <option value='kg'>Kongo</option>
                            <option value='ko'>Korean</option>
                            <option value='rk'>Korean-romaji</option>
                            <option value='kj'>Kuanyama</option>
                            <option value='ku'>Kurdish</option>
                            <option value='lo'>Lao</option>
                            <option value='la'>Latin</option>
                            <option value='lv'>Latvian</option>
                            <option value='l1'>Lezghian</option>
                            <option value='li'>Limburgish</option>
                            <option value='ln'>Lingala</option>
                            <option value='lt'>Lithuanian</option>
                            <option value='j1'>Lojban</option>
                            <option value='l2'>Lombard</option>
                            <option value='lu'>Luba-katanga</option>
                            <option value='lb'>Luxembourgish</option>
                            <option value='mk'>Macedonian</option>
                            <option value='m1'>Maithili</option>
                            <option value='mg'>Malagasy</option>
                            <option value='ms'>Malay</option>
                            <option value='ml'>Malayalam</option>
                            <option value='m8'>Malayalam-romaji</option>
                            <option value='mt'>Maltese</option>
                            <option value='gv'>Manx</option>
                            <option value='mi'>Maori</option>
                            <option value='mr'>Marathi</option>
                            <option value='m9'>Marathi-romaji</option>
                            <option value='mh'>Marshallese</option>
                            <option value='m7'>Mazanderani</option>
                            <option value='m3'>Minangkabau</option>
                            <option value='x2'>Mingrelian</option>
                            <option value='m5'>Mirandese</option>
                            <option value='mo'>Moldavian</option>
                            <option value='mn'>Mongolian</option>
                            <option value='n4'>Nahuatl</option>
                            <option value='na'>Nauru</option>
                            <option value='nv'>Navajo</option>
                            <option value='nd'>Ndebele, north</option>
                            <option value='nr'>Ndebele, south</option>
                            <option value='ng'>Ndonga</option>
                            <option value='n1'>Neapolitan</option>
                            <option value='n3'>Nepal bhasa</option>
                            <option value='ne'>Nepali</option>
                            <option value='n5'>Nepali-romaji</option>
                            <option value='l3'>Northern luri</option>
                            <option value='no'>Norwegian</option>
                            <option value='nb'>Norwegian bokmål</option>
                            <option value='nn'>Norwegian nynorsk</option>
                            <option value='oc'>Occitan</option>
                            <option value='oj'>Ojibwa</option>
                            <option value='or'>Oriya</option>
                            <option value='o1'>Oriya-romaji</option>
                            <option value='om'>Oromo</option>
                            <option value='os'>Ossetian</option>
                            <option value='pi'>Pali</option>
                            <option value='p1'>Pampanga</option>
                            <option value='pa'>Panjabi</option>
                            <option value='p5'>Panjabi-romaji</option>
                            <option value='fa'>Persian</option>
                            <option value='p2'>Pfaelzisch</option>
                            <option value='p3'>Piemontese</option>
                            <option value='pl'>Polish</option>
                            <option value='pt'>Portuguese</option>
                            <option value='ps'>Pushto</option>
                            <option value='qu'>Quechua</option>
                            <option value='ro'>Romanian</option>
                            <option value='rm'>Romansh</option>
                            <option value='rn'>Rundi</option>
                            <option value='b4'>Russia buriat</option>
                            <option value='ru'>Russian</option>
                            <option value='r2'>Russian-romaji</option>
                            <option value='r1'>Rusyn</option>
                            <option value='se'>Sami, northern</option>
                            <option value='sm'>Samoan</option>
                            <option value='sg'>Sango</option>
                            <option value='sa'>Sanskrit</option>
                            <option value='s4'>Sanskrit-romaji</option>
                            <option value='sc'>Sardinian</option>
                            <option value='s3'>Scots</option>
                            <option value='gd'>Scottish gaelic</option>
                            <option value='sr'>Serbian</option>
                            <option value='sh'>Serbo-croatian</option>
                            <option value='sn'>Shona</option>
                            <option value='ii'>Sichuan yi</option>
                            <option value='s2'>Sicilian</option>
                            <option value='sd'>Sindhi</option>
                            <option value='si'>Sinhala</option>
                            <option value='sk'>Slovak</option>
                            <option value='sl'>Slovenian</option>
                            <option value='so'>Somali</option>
                            <option value='d2'>Sorbian, lower</option>
                            <option value='h2'>Sorbian, upper</option>
                            <option value='st'>Sotho, southern</option>
                            <option value='a4'>South azerbaijani</option>
                            <option value='es'>Spanish</option>
                            <option value='su'>Sundanese</option>
                            <option value='sw'>Swahili</option>
                            <option value='ss'>Swati</option>
                            <option value='sv'>Swedish</option>
                            <option value='tl'>Tagalog</option>
                            <option value='ty'>Tahitian</option>
                            <option value='tg'>Tajik</option>
                            <option value='ta'>Tamil</option>
                            <option value='t2'>Tamil-romaji</option>
                            <option value='tt'>Tatar</option>
                            <option value='te'>Telugu</option>
                            <option value='t3'>Telugu-romaji</option>
                            <option value='th'>Thai</option>
                            <option value='t4'>Thai-romaji</option>
                            <option value='bo'>Tibetan</option>
                            <option value='ti'>Tigrinya</option>
                            <option value='to'>Tonga (tonga islands)</option>
                            <option value='a1'>Tosk albanian</option>
                            <option value='ts'>Tsonga</option>
                            <option value='tn'>Tswana</option>
                            <option value='tr'>Turkish</option>
                            <option value='tk'>Turkmen</option>
                            <option value='t1'>Tuvinian</option>
                            <option value='tw'>Twi</option>
                            <option value='ug'>Uighur</option>
                            <option value='uk'>Ukrainian</option>
                            <option value='ur'>Urdu</option>
                            <option value='u1'>Urdu-romaji</option>
                            <option value='uz'>Uzbek</option>
                            <option value='ve'>Venda</option>
                            <option value='v1'>Venetian</option>
                            <option value='v2'>Veps</option>
                            <option value='vi'>Vietnamese</option>
                            <option value='v3'>Vlaams</option>
                            <option value='vo'>Volapük</option>
                            <option value='wa'>Walloon</option>
                            <option value='w1'>Waray</option>
                            <option value='cy'>Welsh</option>
                            <option value='m4'>Western mari</option>
                            <option value='p4'>Western panjabi</option>
                            <option value='wo'>Wolof</option>
                            <option value='w2'>Wu chinese</option>
                            <option value='xh'>Xhosa</option>
                            <option value='s1'>Yakut</option>
                            <option value='yi'>Yiddish</option>
                            <option value='yo'>Yoruba</option>
                            <option value='y1'>Yue chinese</option>
                            <option value='za'>Zhuang</option>
                            <option value='zu'>Zulu</option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.lyrics.enableYoutubeLyrics')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
                    </div>
                </div>
            </div>
            <div class="md-option-header">
                <span>{{$root.getLz('settings.header.connectivity')}}</span>
            </div>
            <div class="settings-option-body">

                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.playbackNotifications')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.general.playbackNotifications" switch/>
                    </div>
                </div>

                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.discordRPC')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" v-model="app.cfg.general.discord_rpc">
                            <option value="0">{{$root.getLz('term.disabled')}}</option>
                            <option value="1">{{$root.getLz('settings.header.connectivity.discordRPC.cider')}}</option>
                            <option value="2">{{$root.getLz('settings.header.connectivity.discordRPC.appleMusic')}}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.general.discord_rpc != 0">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.general.discord_rpc_clear_on_pause" switch/>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <button class="md-btn" id="lfmConnect" ref="lfmConnect"
                                onclick="app.LastFMAuthenticate()">
                            {{$root.getLz('term.connect')}}
                        </button>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.delay')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="number" min="50" max="100" v-model="app.cfg.lastfm.scrobble_after"/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.nowPlaying')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.lastfm.NowPlaying" switch/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.removeFeatured')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists" switch/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.lastfm.filterLoop" switch/>
                    </div>
                </div>
            </div>
            <div class="md-option-header">
                <span>{{$root.getLz('settings.header.experimental')}}</span>
            </div>
            <div class="settings-option-body">

                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.experimental.compactUI')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('compactui')" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')" switch/>
                    </div>
                </div>

                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('term.language')}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
                                v-model="app.cfg.general.language">
                            <optgroup :label="index" v-for="(categories, index) in getLanguages()">
                                <option v-for="lang in categories" :value="lang.code">{{lang.nameNative}} ({{
                                    lang.nameEnglish }})
                                </option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz("settings.option.experimental.close_button_hide")}}
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
                    </div>
                </div>
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{$root.getLz('term.updateCider')}} 
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <button class="md-btn" @click="app.checkForUpdate()">
                            {{$root.getLz('term.check')}}
                        </button>
                    </div>
                </div>
            </div>
            <div style="opacity: 0.5; pointer-events: none">
                <div class="md-option-header">
                    <span>{{$root.getLz('settings.header.unfinished')}}</span>
                </div>
                <div class="settings-option-body">
                    <div class="md-option-line">
                        <div class="md-option-segment">
                            Theme
                        </div>
                        <div class="md-option-segment md-option-segment_auto">
                            <select class="md-select">
                                <option value="0">Cider</option>
                            </select>
                        </div>
                    </div>
                    <div class="md-option-line">
                        <div class="md-option-segment">
                            Theme Options
                        </div>
                        <div class="md-option-segment md-option-segment_auto">
                            <button class="btn">Theme Options</button>
                        </div>
                    </div>
                    <div class="md-option-line">
                        <div class="md-option-segment">
                            Scrollbars
                        </div>
                        <div class="md-option-segment md-option-segment_auto">
                            <select class="md-select">
                                <option value="0">Show on hover</option>
                                <option value="1">Always show</option>
                                <option value="2">Hidden</option>
                            </select>
                        </div>
                    </div>
                    <div class="md-option-line">
                        <div class="md-option-segment">
                            Refresh Rate
                        </div>
                        <div class="md-option-segment md-option-segment_auto">
                            <select class="md-select">
                                <option value='0'>Automatic</option>
                                <option value='30'>30</option>
                                <option value='60'>60</option>
                                <option value='144'>144</option>
                                <option value='175'>175</option>
                                <option value='240'>240</option>
                                <option value='360'>30</option>
                            </select>
                        </div>
                    </div>
                    <div class="md-option-line">
                        <div class="md-option-segment">
                            Open Cider on Startup
                        </div>
                        <div class="md-option-segment md-option-segment_auto">
                            <select class="md-select">
                                <option value='0'>Never</option>
                                <option value='1'>Always</option>
                                <option value='2'>Always, minimized</option>
                                <option value='2'>Always, hidden in tray</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
	Vue.component('cider-settings', {
		template: "#cider-settings",
		props: [],
		data: function () {
			return {
				app: this.$root
			}
		},
		mounted: function () {
			if (app.cfg.lastfm.enabled) {
				const element = document.getElementById('lfmConnect');
				if (element) {
					element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`;
					element.onclick = app.LastFMDeauthorize;
				}
			}
		},
		methods: {
			getLanguages: function () {
				let langs = this.$root.lzListing
				let categories = {
					"main": [],
					"fun": [],
					"unsorted": []
				}
				// sort by category if category is undefined or empty put it in "unsorted"
				for (let i = 0; i < langs.length; i++) {
					if (langs[i].category === undefined || langs[i].category === "") {
						categories.unsorted.push(langs[i])
					} else {
						categories[langs[i].category].push(langs[i])
					}
				}
				// return
				return categories
			},
			addExperiment(flag) {
				app.cfg.advanced.experiments.push(flag);
			},
			removeExperiment(flag) {
				app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
			},
			toggleAudioContext: function () {
				if (app.cfg.advanced.AudioContext) {
					CiderAudio.init();
					if (app.cfg.audio.normalization) {
						CiderAudio.normalizerOn()
					}
					if (app.cfg.audio.spatial) {
						CiderAudio.spatialOn()
					}
				} else {
					CiderAudio.off();
				}
			},
			toggleNormalization: function () {
				if (app.cfg.audio.normalization) {
					CiderAudio.normalizerOn()
				} else {
					CiderAudio.normalizerOff()
				}
			},
			toggleSpatial: function () {
				if (app.cfg.audio.spatial) {
					CiderAudio.spatialOn()
				} else {
					CiderAudio.spatialOff()
				}
			},
			changeAudioQuality: function () {
				app.mk.bitrate = app.cfg.audio.quality
			},
			toggleUserInfo: function () {
				app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
			},
			sendDataToMTT: function () {
			    	ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
                //  setStoreValue does not change plugin store values somehow
                    ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
			}
		}
	})
</script>
